<template>
  <div class="container">
    <!-- <div>
			<mt-header class="mint-header" title="客户信息">
				<router-link :to="{ path: '/customerDetails/' + cusPreDetail.id }" slot="left">
					<mt-button icon="back">返回</mt-button>
				</router-link>
				<mt-button @click="saveCustomerInfo" slot="right">保存</mt-button>
			</mt-header>
		</div> -->
    <div class="info-modular">
      <div class="info-title">
        <div style="float: left;"><i class="fa fa-user"></i>客戶信息</div>
        <div>
          <mt-button @click="saveCustomerInfo"
                     class="saveBtn">保存</mt-button>
        </div>
      </div>
      <mt-field label="客户姓名"
                v-model="customerInfo.name"></mt-field>
      <mt-field label="客户性别"
                v-model="customerInfo.genderName"
                @click.native="showGender"
                readonly></mt-field>
      <mt-field label="客户年龄"
                v-model="customerInfo.ageRange"
                @click.native="showAgeRange"
                readonly></mt-field>
      <mt-field label="客户电话"
                disabled
                v-model="cusPreDetail.mobile"></mt-field>
      <mt-field label="意向级别"
                v-model="customerInfo.intentionLevel"
                @click.native="showIntentionLevel"
                readonly></mt-field>
    </div>
    <div class="info-modular">
      <div class="info-title">
        <div style="float: left;"><i class="fa fa-list-alt"></i>报备/到访楼盘</div>
      </div>
      <mt-field label="报备楼盘"
                disabled
                v-model="cusPreDetail.premisesName"></mt-field>
      <mt-field label="分销渠道"
                disabled
                v-model="cusPreDetail.staffCompanyName"></mt-field>
      <mt-field label="来访次数"
                disabled
                v-model="cusPreDetail.visitState"></mt-field>
      <mt-field label="首次来访"
                disabled
                v-model="cusPreDetail.visitTime"></mt-field>
      <div v-for="(item, index) in repeatVisitFollow"
           v-show="repeatVisitFollow.length > 0">
        <mt-field :label="item.visitedCount+'次到访'"
                  disabled
                  v-model="item.visitTime"></mt-field>
      </div>
      <div>
        <mt-field label="置业顾问"
                  v-model="customerInfo.adviserName"
                  @click.native="showAdviser"
                  readonly></mt-field>
        <mt-field label="顾问电话"
                  readonly
                  v-model="customerInfo.adviserPhone"></mt-field>
      </div>
    </div>
    <div class="info-modular">
      <div class="info-title">
        <div style="float: left;"><i class="fa fa-info-circle"></i>更多信息</div>
      </div>
      <mt-field label="从事行业"
                v-model="customerInfo.industry"
                :attr="{ maxlength: 30 }"></mt-field>
      <mt-field label="职位描述"
                v-model="customerInfo.jobDesc"
                :attr="{ maxlength: 30 }"></mt-field>
      <mt-field label="交通工具"
                v-model="customerInfo.vehicle"
                @click.native="showVehicle"
                readonly></mt-field>
      <mt-field label="认知途径"
                v-model="customerInfo.cognitiveChannel"
                :attr="{ maxlength: 30 }"></mt-field>
      <mt-field label="家庭结构"
                v-model="customerInfo.familyStructure"
                :attr="{ maxlength: 30 }"></mt-field>
      <mt-field label="穿着打扮"
                v-model="customerInfo.dressUp"
                :attr="{ maxlength: 30 }"></mt-field>
      <mt-field label="一同来访"
                v-model="customerInfo.visitTogether"
                @click.native="showVisitTogether"
                type="text"
                readonly></mt-field>
      <mt-field label="工作来往城市及区域"
                v-model="customerInfo.workCity"
                :attr="{ maxlength: 30 }"></mt-field>
      <mt-field label="性格特点"
                v-model="customerInfo.nature"
                :attr="{ maxlength: 30 }"></mt-field>
      <mt-field label="置业经历"
                v-model="customerInfo.houseExperien"
                :attr="{ maxlength: 30 }"></mt-field>
      <mt-field label="现有何处房产"
                v-model="customerInfo.houseAddress"
                :attr="{ maxlength: 30 }"></mt-field>
      <mt-field label="购房预算"
                v-model="customerInfo.budget"
                :attr="{ maxlength: 30 }"></mt-field>
      <mt-field label="付款方式"
                v-model="customerInfo.payMethod"
                @click.native="showPayMethod"
                readonly></mt-field>
      <mt-field label="为何采取此方式付款"
                v-model="customerInfo.payWhy"
                :attr="{ maxlength: 30 }"></mt-field>
      <mt-field label="房主与到访客户关系"
                v-model="customerInfo.relation"
                :attr="{ maxlength: 30 }"></mt-field>
      <mt-field label="资金实力"
                v-model="customerInfo.deepPocket"
                :attr="{ maxlength: 30 }"></mt-field>
      <mt-field label="决策人"
                v-model="customerInfo.policymaker"
                :attr="{ maxlength: 30 }"></mt-field>
      <mt-field label="本地/外地"
                v-model="customerInfo.isLocal"
                :attr="{ maxlength: 30 }"></mt-field>
      <mt-field label="做过哪些类型投资"
                v-model="customerInfo.investment"
                :attr="{ maxlength: 100 }"></mt-field>
      <mt-field label="对投资类产品是否了解"
                v-model="customerInfo.didKnowInvestment"
                :attr="{ maxlength: 30 }"></mt-field>
      <mt-field label="对本案兴趣点"
                rows="3"
                v-model="customerInfo.focus"
                @click.native="showFocus"
                type="textarea"
                readonly></mt-field>
      <mt-field label="对本案产品建议"
                rows="3"
                v-model="customerInfo.suggest"
                type="textarea"
                :attr="{ maxlength: 100 }"></mt-field>
      <mt-field label="对比项目"
                rows="3"
                v-model="customerInfo.compare"
                type="textarea"
                :attr="{ maxlength: 100 }"></mt-field>
      <mt-field label="对比项目为何没买"
                rows="3"
                v-model="customerInfo.notBuy"
                type="textarea"
                :attr="{ maxlength: 100 }"></mt-field>
      <mt-field label="上门接待过程"
                rows="6"
                v-model="customerInfo.reception"
                type="textarea"
                :attr="{ maxlength: 200 }"></mt-field>
    </div>

    <mt-popup v-model="popupGender"
              position="bottom"
              class="mint-popup mint-datetime mint-popup-bottom">
      <div class="">
        <div class="picker-toolbar">
          <div class="mint-datetime-action left"
               style="width: 49%;"
               @click="popupGender=false">取消</div>
          <div class="mint-datetime-action left"
               style="width: 49%;"
               @click="confirmGender">确定</div>
        </div>
        <mt-picker :slots="genderDDL"
                   value-key='label'
                   :item-height="48"
                   @change="selectGender"></mt-picker>
      </div>
    </mt-popup>
    <mt-popup v-model="popupAgeRange"
              position="bottom"
              class="mint-popup mint-datetime mint-popup-bottom">
      <div class="">
        <div class="picker-toolbar">
          <div class="mint-datetime-action left"
               style="width: 49%;"
               @click="popupAgeRange=false">取消</div>
          <div class="mint-datetime-action left"
               style="width: 49%;"
               @click="confirmAgeRange">确定</div>
        </div>
        <mt-picker :slots="ageRangeDDL"
                   value-key='label'
                   :item-height="48"
                   @change="selectAgeRange"></mt-picker>
      </div>
    </mt-popup>
    <mt-popup v-model="popupAdviser"
              position="bottom"
              class="mint-popup mint-datetime mint-popup-bottom">
      <div class="">
        <div class="picker-toolbar">
          <div class="mint-datetime-action left"
               style="width: 49%;"
               @click="popupAdviser=false">取消</div>
          <div class="mint-datetime-action left"
               style="width: 49%;"
               @click="confirmAdviser">确定</div>
        </div>
        <mt-picker :slots="adviserDDL"
                   value-key='label'
                   :item-height="48"
                   @change="selectAdviser"></mt-picker>
      </div>
    </mt-popup>
    <mt-popup v-model="popupIntentionLevel"
              position="bottom"
              class="mint-popup mint-datetime mint-popup-bottom">
      <div class="">
        <div class="picker-toolbar">
          <div class="mint-datetime-action left"
               style="width: 49%;"
               @click="popupIntentionLevel=false">取消</div>
          <div class="mint-datetime-action left"
               style="width: 49%;"
               @click="confirmIntentionLevel">确定</div>
        </div>
        <mt-picker :slots="intentionLevelDDL"
                   value-key='label'
                   :item-height="48"
                   @change="selectIntentionLevel"></mt-picker>
      </div>
    </mt-popup>
    <mt-popup v-model="popupVehicle"
              position="bottom"
              class="mint-popup mint-datetime mint-popup-bottom">
      <div class="">
        <div class="picker-toolbar">
          <div class="mint-datetime-action left"
               style="width: 49%;"
               @click="popupVehicle=false">取消</div>
          <div class="mint-datetime-action left"
               style="width: 49%;"
               @click="confirmVehicle">确定</div>
        </div>
        <mt-picker :slots="vehicleDDL"
                   value-key='label'
                   :item-height="48"
                   @change="selectVehicle"></mt-picker>
      </div>
    </mt-popup>
    <mt-popup v-model="popupVisitTogether"
              position="bottom"
              class="mint-popup mint-datetime mint-popup-bottom">
      <div class="">
        <div class="picker-toolbar">
          <div class="mint-datetime-action left"
               style="width: 49%;"
               @click="popupVisitTogether=false">取消</div>
          <div class="mint-datetime-action left"
               style="width: 49%;"
               @click="confirmVisitTogether">确定</div>
        </div>
        <mt-checklist align="right"
                      v-model="visitTogetherValues"
                      :options="visitTogetherDDL"
                      @change="selectVisitTogether">
        </mt-checklist>
      </div>
    </mt-popup>
    <mt-popup v-model="popupPayMethod"
              position="bottom"
              class="mint-popup mint-datetime mint-popup-bottom">
      <div class="">
        <div class="picker-toolbar">
          <div class="mint-datetime-action left"
               style="width: 49%;"
               @click="popupPayMethod=false">取消</div>
          <div class="mint-datetime-action left"
               style="width: 49%;"
               @click="confirmPayMethod">确定</div>
        </div>
        <mt-picker :slots="payMethodDDL"
                   value-key='label'
                   :item-height="48"
                   @change="selectPayMethod"></mt-picker>
      </div>
    </mt-popup>
    <mt-popup v-model="popupFocus"
              position="bottom"
              class="mint-popup mint-datetime mint-popup-bottom"
              style="max-height: 200px; overflow: scroll;">
      <div class="">
        <div class="picker-toolbar">
          <div class="mint-datetime-action left"
               style="width: 49%;"
               @click="popupFocus=false">取消</div>
          <div class="mint-datetime-action left"
               style="width: 49%;"
               @click="confirmFocus">确定</div>
        </div>
        <mt-checklist align="right"
                      v-model="focusValues"
                      :options="focusDDL"
                      @change="selectFocus">
        </mt-checklist>
      </div>
    </mt-popup>
    <div class="footer-content"
         style="padding: 30px;">
      <a class="operationBtn btnOne followBtn"
         style="background-color: #f08745; color: #fff;"
         @click="saveCustomerInfo">保存客户信息</a>
    </div>
  </div>
</template>
<script>
import {
  Toast,
  MessageBox,
  Header,
  Field,
  Checklist,
  Popup,
  Search,
  DatetimePicker,
  CellSwipe,
  Picker
} from "mint-ui";
export default {
  components: {
    Toast,
    MessageBox,
    Field,
    Checklist,
    Popup,
    Search,
    DatetimePicker,
    CellSwipe,
    Picker
  },
  filters: {},
  data() {
    return {
      cusPreId: this.$route.params.id,
      premisesId: this.$route.params.premisesId,
      cusPreDetail: {},
      estateAdviser: {},
      repeatVisitFollow: [],
      params: {},
      customerInfo: {},
      popupGender: false,
      tempGender: { value: "", label: "请选择性别" },
      genderDDL: [
        {
          values: [
            { value: "", label: "请选择性别" },
            { value: "男", label: "男" },
            { value: "女", label: "女" }
          ]
        }
      ],
      popupAgeRange: false,
      tempAgeRange: { value: "", label: "请选择年龄范围" },
      ageRangeDDL: [
        {
          values: [
            { value: "", label: "请选择年龄范围" },
            { value: "20-30", label: "20-30" },
            { value: "30-40", label: "30-40" },
            { value: "40-50", label: "40-50" },
            { value: "50-60", label: "50-60" },
            { value: "60以上", label: "60以上" }
          ]
        }
      ],
      popupAdviser: false,
      tempAdviser: { value: "", label: "请选择置业顾问" },
      adviserDDL: [],
      popupIntentionLevel: false,
      tempIntentionLevel: { value: "", label: "请选择客户意向级别" },
      intentionLevelDDL: [
        {
          values: [
            { value: "", label: "请选择客户意向级别" },
            { value: "A", label: "A" },
            { value: "B", label: "B" },
            { value: "C", label: "C" },
            { value: "D", label: "D" }
          ]
        }
      ],
      popupVehicle: false,
      tempVehicle: { value: "", label: "请选择交通工具" },
      vehicleDDL: [
        {
          values: [
            { value: "", label: "请选择交通工具" },
            { value: "步行", label: "步行" },
            { value: "开车", label: "开车" },
            { value: "公共交通", label: "公共交通" }
          ]
        }
      ],
      visitTogetherValues: [],
      popupVisitTogether: false,
      tempVisitTogegher: [],
      visitTogetherDDL: ["自己", "家人", "朋友", "同事"],
      popupPayMethod: false,
      tempPayMethod: { value: "", label: "请选择付款方式" },
      payMethodDDL: [
        {
          values: [
            { value: "", label: "请选择付款方式" },
            { value: "按揭", label: "按揭" },
            { value: "一次性", label: "一次性" }
          ]
        }
      ],
      focusValues: [],
      popupFocus: false,
      tempFocus: [],
      focusDDL: [
        "价格",
        "地段",
        "户型",
        "现房",
        "低首付",
        "收益高",
        "有包租",
        "配套",
        "开发商",
        "物业",
        "风水",
        "人流量",
        "小区环境",
        "周边环境",
        "现场活动"
      ]
    };
  },
  watch: {},
  computed: {},
  mounted: function() {
    var _self = this;
    _self.findCusPreDetail();
    _self.findAdviser();
  },
  methods: {
    findCusPreDetail() {
      var _self = this;
      var params = {};
      params.id = _self.cusPreId;
      var body = {};
      body.params = params;
      var url = _self.utilHelper.apiUrl + "/api/getCPDetail";
      _self.$http.post(url, body).then(response => {
        var data = response.body.resData;
        var result = data.result;
        var errorMsg = data.resultMsg;
        var premisesId = window.localStorage.getItem("2_premisesId");
        if ("1" == result) {
          _self.cusPreDetail = data.cpDto || {};
          _self.estateAdviser = data.estateAdviser || {};
          _self.customerInfo = data.customerInfo || {};
          _self.customerInfo.cpId = _self.cusPreDetail.id;
          _self.customerInfo.name = _self.cusPreDetail.name;
          _self.customerInfo.genderName = _self.cusPreDetail.genderName;
          _self.customerInfo.adviserUuid = _self.estateAdviser.adviserUuid;
          _self.customerInfo.adviserName = _self.estateAdviser.name;
          _self.customerInfo.adviserPhone = _self.estateAdviser.phone;
          _self.repeatVisitFollow = data.repeatVisitFollow || [];
        } else {
          var instance = Toast(errorMsg);
          setTimeout(() => {
            instance.close();
            _self.$router.replace({
              path: "/index"
            });
          }, 3000);
        }
      });
    },
    findAdviser() {
      let premisesId = this.premisesId;
      var url = this.utilHelper.apiUrl + "/api/premises/adviser/list";
      var body = {};
      body.params = {
        id: premisesId
      };
      this.$http.post(url, body).then(response => {
        var body = response.body;
        if (1 == body.result) {
          var newAdviserArr = [];
          var emptyAdviser = { value: "", label: "请选择置业顾问", phone: "" };
          newAdviserArr.push(emptyAdviser);

          var adviserList = body.resData.list;
          adviserList.forEach(element => {
            var obj = {};
            obj.value = element.adviserUuid;
            obj.label = element.name;
            obj.phone = element.phone;
            newAdviserArr.push(obj);
          });
          var adviserObj = {};
          adviserObj.values = newAdviserArr;
          this.adviserDDL.push(adviserObj);
        } else {
          Toast({
            message: "数据获取失败",
            position: "middle",
            duration: 2000
          });
        }
      });
    },
    showGender() {
      this.popupGender = true;
    },
    confirmGender() {
      this.customerInfo.genderName = this.tempGender.value;
      this.popupGender = false;
    },
    selectGender(picker, values) {
      if (values) {
        this.tempGender = values[0];
      }
      //this.customerInfo.genderName = values[0].value;
    },
    showAgeRange() {
      this.popupAgeRange = true;
    },
    confirmAgeRange() {
      this.customerInfo.ageRange = this.tempAgeRange.value;
      this.popupAgeRange = false;
    },
    selectAgeRange(picker, values) {
      if (values) {
        this.tempAgeRange = values[0];
      }
      // this.customerInfo.ageRange = values[0].value;
    },
    showAdviser() {
      this.popupAdviser = true;
    },
    confirmAdviser() {
      this.customerInfo.adviserUuid = this.tempAdviser.value;
      this.customerInfo.adviserName = this.tempAdviser.label;
      this.customerInfo.adviserPhone = this.tempAdviser.phone;
      this.popupAdviser = false;
    },
    selectAdviser(picker, values) {
      if (values && values.length > 0) {
        this.tempAdviser = values[0];
        // this.customerInfo.adviserUuid = values[0].value;
        // this.customerInfo.adviserName = values[0].label;
        // this.customerInfo.adviserPhone = values[0].phone;
      }
    },
    showIntentionLevel() {
      this.popupIntentionLevel = true;
    },
    confirmIntentionLevel() {
      this.customerInfo.intentionLevel = this.tempIntentionLevel.value;
      this.popupIntentionLevel = false;
    },
    selectIntentionLevel(picker, values) {
      if (values) {
        this.tempIntentionLevel = values[0];
      }
      // this.customerInfo.intentionLevel = values[0].value;
    },
    showVehicle() {
      this.popupVehicle = true;
    },
    confirmVehicle() {
      this.customerInfo.vehicle = this.tempVehicle.value;
      this.popupVehicle = false;
    },
    selectVehicle(picker, values) {
      if (values) {
        this.tempVehicle = values[0];
      }
      // this.customerInfo.vehicle = values[0].value;
    },
    showVisitTogether() {
      this.popupVisitTogether = true;
    },
    confirmVisitTogether() {
      this.customerInfo.visitTogether = this.tempVisitTogegher;
      this.popupVisitTogether = false;
    },
    selectVisitTogether(values) {
      if (values) {
        this.tempVisitTogegher = values;
      }
      // this.customerInfo.visitTogether = values;
    },
    showPayMethod() {
      this.popupPayMethod = true;
    },
    confirmPayMethod() {
      this.customerInfo.payMethod = this.tempPayMethod.value;
      this.popupPayMethod = false;
    },
    selectPayMethod(picker, values) {
      if (values) {
        this.tempPayMethod = values[0];
      }
      // this.customerInfo.payMethod = values[0].value;
    },
    showFocus() {
      this.popupFocus = true;
    },
    confirmFocus() {
      this.customerInfo.focus = this.tempFocus;
      this.popupFocus = false;
    },
    selectFocus(values) {
      if (values) {
        this.tempFocus = values;
      }
      // this.customerInfo.focus = values;
    },
    saveCustomerInfo() {
      var _self = this;
      let visitTogether = _self.customerInfo.visitTogether;
      if (
        visitTogether &&
        visitTogether.length > 0 &&
        visitTogether.indexOf(",") < 0
      ) {
        _self.customerInfo.visitTogether = visitTogether.join(",");
      }
      let focus = _self.customerInfo.focus;
      if (focus && focus.length > 0 && focus.indexOf(",") < 0) {
        _self.customerInfo.focus = focus.join(",");
      }

      delete _self.customerInfo.id;
      delete _self.customerInfo.phone;
      delete _self.customerInfo.sex;
      delete _self.customerInfo.createTime;
      delete _self.customerInfo.createUserId;
      delete _self.customerInfo.updateTime;
      delete _self.customerInfo.updateUserId;
      delete _self.customerInfo.delFlag;
      delete _self.customerInfo.remark;

      var params = _self.customerInfo;
      var body = {};
      body.params = params;
      var url = _self.utilHelper.apiUrl + "/api/addOrEditCustomerInfo";
      _self.$http.post(url, body).then(response => {
        var data = response.body.resData;
        var result = data.result;
        var errorMsg = data.resultMsg;
        if ("1" == result) {
          var instance = Toast("保存成功!");
          setTimeout(() => {
            instance.close();
            _self.findCusPreDetail();
          }, 2000);
        } else {
          _self.findCusPreDetail();
        }
      });
    }
  }
};
</script>
<style scoped>
.home_image {
  position: fixed;
  bottom: 75px;
  right: 15px;
  z-index: 300;
  box-shadow: 0px 0px 5px 2px #888888;
  border-radius: 50px;
}
.home_image .home_icon {
  display: block;
  width: 60px;
  height: 60px;
  background-color: #fff;
  color: #eb6100;
  border-radius: 50px;
  text-align: center;
  padding-top: 15px;
}
.header-wrap {
  height: 96px;
  width: 100%;
  background: url(../../assets/images/headerBg.jpg) no-repeat left top;
  background-size: 100% auto;
  padding: 20px 10px 0;
}
.personal-info {
  height: 20px;
  position: relative;
}
.personal-info .name {
  color: #fff;
  margin-right: 10px;
  float: left;
  line-height: 22px;
}
.personal-info .sex {
  width: 18px;
  height: 16px;
  overflow: hidden;
  background: url(../../assets/images/sex.png) no-repeat;
  background-size: 32px auto;
  margin-right: 4px;
  background-position: 0 0;
  float: left;
  border: 1px solid #fff;
  margin-top: 3px;
}
.personal-info .sex.active {
  background-position: -16px 0;
}
.personal-info .label {
  height: 16px;
  background-color: #f24055;
  color: #fff;
  font-size: 12px;
  padding: 0 6px;
  float: left;
  line-height: 14px;
  margin-top: 3px;
  border: 1px solid #fff;
}
.other-list {
  margin-top: 10px;
  height: 36px;
}
.other-list li {
  color: #fff;
  padding-left: 18px;
  position: relative;
  float: left;
  width: 110px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.other-list .fa {
  position: absolute;
  left: 0;
  top: 1px;
  color: #fff;
  font-size: 16px;
}

.info-modular {
  background-color: #fff;
  border-bottom: 1px solid #cdcdcd;
}
.info-title {
  height: 32px;
  line-height: 32px;
  background-color: #f0f0f0;
  padding: 0 10px 0 35px;
  position: relative;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.info-title .fa {
  position: absolute;
  left: 10px;
  top: 7px;
  color: #eb6100;
  font-size: 17px;
}

.channel-list {
  padding: 10px;
}
.channel-list li {
  margin-bottom: 10px;
}
.life-cycle {
  padding: 0 10px;
}
.life-cycle li {
  padding: 12px 0 0 120px;
  border-left: 1px solid #eb6100;
  position: relative;
  text-align: center;
}
.life-cycle-left {
  width: 120px;
  padding-left: 14px;
  position: absolute;
  left: 0;
  top: 12px;
}
.life-cycle-left .circle-o {
  position: absolute;
  left: -6px;
  top: 20px;
  color: #eb6100;
  width: 11px;
  height: 11px;
  border: 2px solid #eb6100;
  background-color: #fff;
  border-radius: 6px;
}
.life-cycle-left .time {
  width: 106px;
  display: inline-block;
}
.life-cycle-left .opeBtn {
  width: 105px;
  height: 24px;
  border: 1px solid #22b7a5;
  line-height: 22px;
  border-radius: 60px;
  display: block;
  margin: 10px auto 0;
  color: #22b7a5;
}
.life-cycle-left .opeA {
  border: 1px solid #3e87ea;
  color: #3e87ea;
}
.life-cycle-right {
  border-bottom: 1px solid #cdcdcd;
  min-height: 82px;
  padding-bottom: 12px;
}
.life-cycle-right .cycle-title {
  min-height: 46px;
  text-align: left;
}
.life-cycle-right .identification {
  position: relative;
  padding-left: 24px;
  display: inline-block;
  color: #eb6100;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.identification .fa {
  position: absolute;
  left: 1px;
  top: 3px;
}
.life-cycle li:last-child .life-cycle-right {
  border-bottom: none;
}

/*底部按钮*/
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}
.footer-content .operationBtn {
  float: left;
  width: 50%;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.footer-content .btnOne {
  background-color: #fff;
  border-top: 1px solid #cdcdcd;
  color: #333;
}
.footer-content .btnTwo {
  background-color: #eb6100;
  color: #fff;
}

.footer-content:after,
.personal-info:after,
.other-list:after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  overflow: hidden;
  font-size: 0;
  height: 0;
}

/*弹出层*/
.popup-page,
.popup-mask {
  position: fixed;
  z-index: 99;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.popup-mask {
  background-color: #000;
  opacity: 0.3;
}
.popup-container {
  width: 260px;
  position: relative;
  background-color: #fff;
  top: 160px;
  left: 50%;
  margin-left: -130px;
  z-index: 100;
  border-radius: 6px;
}
.popup-header {
  padding: 12px 20px;
  border-bottom: 1px solid #cdcdcd;
}
.popup-body {
  padding: 16px 20px 10px;
}
.invalid-list li {
  position: relative;
  padding-left: 24px;
  line-height: 20px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 10px;
}
.checkIcon {
  position: absolute;
  left: 0;
  width: 18px;
  height: 18px;
  background: url(../../assets/images/checked.png) no-repeat;
  background-position: 0 0;
  background-size: 36px auto;
  top: 1px;
}
.invalid-list li:last-child {
  margin-bottom: 0;
}
.invalid-list .active .checkIcon {
  background-position: -18px 0;
}
.invalid-list .reason {
  border: 1px solid #cdcdcd;
  width: 100%;
  margin-top: 4px;
  display: none;
}
.invalid-list .active .reason {
  display: block;
}
.popup-footer {
  width: 100%;
  border-top: 1px solid #cdcdcd;
}
.popup-footer .btn {
  width: 50%;
  text-align: center;
  float: left;
  padding: 12px 0;
  font-size: 16px;
  color: #999;
}
.popup-footer .checkBtn {
  color: #eb6100;
}
.popup-footer .btn:first-child {
  border-right: 1px solid #cdcdcd;
}
.popup-footer:after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  overflow: hidden;
  font-size: 0;
  height: 0;
}

/*弹出层*/
.popup-page,
.popup-mask {
  position: fixed;
  z-index: 99;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.popup-mask {
  background-color: #000;
  opacity: 0.3;
}
.popup-container {
  width: 260px;
  position: relative;
  background-color: #fff;
  top: 160px;
  left: 50%;
  margin-left: -130px;
  z-index: 100;
  border-radius: 6px;
}
.popup-header {
  padding: 12px 20px;
  border-bottom: 1px solid #cdcdcd;
}
.popup-body {
  padding: 16px 20px 10px;
}
.popup-footer {
  width: 100%;
  border-top: 1px solid #cdcdcd;
}
.popup-footer .btn {
  width: 50%;
  text-align: center;
  float: left;
  padding: 12px 0;
  font-size: 16px;
  color: #999;
}
.popup-footer .checkBtn {
  color: #eb6100;
}
.popup-footer .btn:first-child {
  border-right: 1px solid #cdcdcd;
}
.popup-footer:after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  overflow: hidden;
  font-size: 0;
  height: 0;
}

.complete-information {
  text-align: center;
}
.information-number {
  position: relative;
  line-height: 34px;
  padding-left: 8px;
  margin-top: 8px;
}
.information-number .existingNumer,
.information-number .number-list {
  float: left;
}
.existingNumer {
  display: inline-block;
}
.number-list {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #cdcdcd;
  height: 34px;
  line-height: 32px;
  margin: 0 6px;
}
.number-list .number-list-item {
  width: 30px;
  height: 100%;
  display: inline-block;
  border-right: 1px solid #cdcdcd;
  float: left;
}
.number-list .number-list-item:last-child {
  border-right: none;
}
.number-input-box {
  position: absolute;
  height: 34px;
  left: 40px;
  width: 135px;
  opacity: 0;
}

.footer-content:after,
.information-number:after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  overflow: hidden;
  font-size: 0;
  height: 0;
}

.progress-bar-warp {
  padding: 8px 10px;
  background-color: #fff;
}
.progress-bar {
  padding: 0 10px;
  background-color: #f8f8f8;
}
.progress-bar .bar-list-line {
  position: relative;
  width: 16%;
  float: left;
  border-top: 1px solid #dcdcdc;
  margin-top: 20px;
  text-align: center;
  height: 46px;
  padding-top: 14px;
  height: 54px;
}
.progress-bar .bar-list-line.active {
  color: #ff8e3b;
  border-top: 1px solid #ff8e3b;
}
.bar-list-line .spot {
  position: absolute;
  width: 12px;
  height: 12px;
  top: -6px;
  left: 50%;
  margin-left: -6px;
  background: url(../../assets/images/spot.png) no-repeat;
  background-size: 12px auto;
  background-position: 0 0;
}
.bar-list-line.active .spot {
  background-position: 0 -12px;
}
.bar-list-line.bar_fail .spot {
  background-position: 0 -24px;
}
.progress-bar .bar-list-line.bar_fail {
  color: rgba(255, 0, 0, 1);
  border-top: 1px solid rgba(255, 0, 0, 1);
}
.progress-bar-down li {
  border-bottom: 1px solid #dcdcdc;
  padding: 0 30px 0 10px;
  background-color: #fff;
  position: relative;
}
.progress-bar-down li .fa {
  position: absolute;
  right: 10px;
  top: 12px;
}
.progress-bar-down li .fa-chevron-down,
.progress-bar-down li.active .fa-chevron-up {
  display: block;
}
.progress-bar-down li .fa-chevron-up,
.progress-bar-down li.active .fa-chevron-down {
  display: none;
}
.progress-bar-down .progress-deteil-wrap {
  height: 36px;
  overflow: hidden;
}
.progress-bar-down li.active .progress-deteil-wrap {
  height: auto;
}
.progress-bar-down .progress-deteil {
  line-height: 30px;
  padding-top: 6px;
  min-height: 36px;
}
.progress-deteil > span {
  margin-right: 4px;
}
.progress-deteil > span:last-child {
  margin-right: 0;
}
.font-color {
  color: #ccc;
}
.clearfix {
  *zoom: 1;
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
.operation-btn {
  width: 50%;
  text-align: center;
  height: 40px;
}

.other-list-dial {
  height: 25px;
  background: #fff;
  border-radius: 50px;
  position: relative;
  top: -2px;
}
.other-list-dial .phone-dial {
  position: relative;
  top: 2px;
  color: rgba(255, 0, 0, 1);
  margin-left: 22px;
}
.info-modular .agent-dial {
  width: 60px;
  height: 25px;
  background: rgba(255, 0, 0, 1);
  border-radius: 50px;
  position: relative;
  top: -2px;
  float: right;
}
.copy-model {
  margin-top: 3px;
  width: 60px;
  height: 25px;
  line-height: 25px;
  background: #eb6100;
  border-radius: 50px;
  float: right;
  text-align: center;
}
.followBtn {
  width: 96% !important;
  margin-left: 2%;
  margin-bottom: 10px;
  border-top-style: none !important;
}
.mint-header {
  align-items: center;
  background-color: #f08c45;
  box-sizing: border-box;
  color: #fff;
  display: -ms-flexbox;
  display: flex;
  font-size: 14px;
  height: 40px;
  line-height: 1;
  padding: 0 10px;
  position: relative;
  text-align: center;
  white-space: nowrap;
}
.mint-header-title {
  color: #f0f0f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: inherit;
  font-weight: bold;
  -ms-flex: 1;
  flex: 1;
}
.mint-field-core {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  border: 0;
  -ms-flex: 1;
  flex: 1;
  outline: 0;
  line-height: 1.6;
  font-size: inherit;
  height: 48px;
  width: 100%;
  border-bottom: 1px solid red;
}
.saveBtn {
  background-color: #ff9000;
  position: relative;
  border-radius: 10px;
  height: 30px;
  line-height: 30px;
  float: right;
  width: 70px;
  font-weight: bold;
}
</style>
